<template>
<a-modal
  centered
  width="600px"
  :title="title"
  :visible="show"
  :footer="null"
  @cancel="close"
>
  <slot name="desc"></slot>
  <a-row :gutter="16" >
    <a-col :span="getSpan(i)" class="nmv-mb-8" v-for="(img, i) in imgList" :key="i">
      <img style="width:100%" :src="img" />
    </a-col>
  </a-row>
</a-modal>
</template>

<script>
export default {
  methods: {
    close () {
      this.$emit('showChange', false)
    },
    getSpan (index) {
      if (this.span instanceof Array) {
        return this.span.find((d, i) => (index + 1) % (i + 1) === 0)
      }
      return this.span
    }
  },
  props: {
    title: {
      type: String,
      default: '照片示例'
    },
    show: {
      type: Boolean,
      default: false
    },
    imgList: {
      type: Array,
      default: () => []
    },
    span: {
      type: [Number, Array],
      default: 24
    }
  },
  model: {
    prop: 'show',
    event: 'showChange'
  },
  data () {
    return {}
  }
}
</script>
